<template>
    <span class="support-ico" :class="iconCls"></span>
</template>

<script>
export default {
    name: 'support-ico',
    props: {
        size: {
            type: Number
        },
        type: {
            type: Number
        }
    },
    computed: {
        iconCls() {
            const classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
            return `icon-${this.size} ${classMap[this.type]}`
        }
    }
}
</script>

<style lang='stylus' scoped>
    @import "~common/stylus/mixin.styl"

    .support-ico
        display: inline-block
        vertical-align: top
        background-repeat: no-reapeat
    .icon-1
        width: 12px
        height: 12px
        background-size: 12px
        &.decrease
            bg-image('./decrease_1')
        &.discount
            bg-image('./discount_1')
        &.guarantee
            bg-image('./guarantee_1')
        &.invoice
            bg-image('./invoice_1')
        &.special
            bg-image('./special_1')
    .icon-2
        width: 16px
        height: 16px
        background-size: 16px
        &.decrease
            bg-image('decrease_2')
        &.discount
            bg-image('discount_2')
        &.guarantee
            bg-image('guarantee_2')
        &.invoice
            bg-image('invoice_2')
        &.special
            bg-image('special_2')
    .icon-3
        margin-right: 2px
        width: 12px
        height: 12px
        background-size: 12px
        &.decrease
            bg-image('decrease_3')
        &.discount
            bg-image('discount_3')
        &.guarantee
            bg-image('guarantee_3')
        &.invoice
            bg-image('invoice_3')
        &.special
            bg-image('special_3')
    .icon-4
        width: 16px
        height: 16px
        background-size: 16px
        &.decrease
            bg-image('decrease_3')
        &.discount
            bg-image('discount_3')
        &.guarantee
            bg-image('guarantee_3')
        &.invoice
            bg-image('invoice_3')
        &.special
            bg-image('special_3')
</style>
